Greptile Summary

This PR introduces a fully rewritten in-app markdown preview for Acode, replacing the previous server-based approach. It adds support for footnotes, task lists, emojis, mermaid diagrams, anchor links, math (KaTeX), syntax highlighting, and local asset resolution — all rendered inline within the app using a new markdownPreview page component.

Key highlights of the implementation:

• Lazy loading for heavy dependencies (mermaid, KaTeX, texmath) with correct retry-on-failure caching patterns
• DOMPurify sanitization applied at multiple layers (main HTML, syntax-highlighted code, mermaid SVG output)
• Render versioning to cancel stale async render cycles
• Object URL management with proper revocation to prevent memory leaks
• Unicode-aware slugify for anchor generation (addressing a prior review concern)

Two new issues found beyond those already discussed in previous threads:

• isDarkColor ignores non-hex color formats — CSS custom properties often resolve to rgb(...), hsl(...), or 8-digit hex. The current implementation only handles 6-digit hex and unconditionally returns true (dark) for all other formats. On light themes using non-hex color values, mermaid diagrams will be rendered with dark-mode theme colors on a light background, producing illegible output.
• package-lock.json is out of sync with bun.lock — katex and markdown-it-texmath appear as direct dependencies in bun.lock (and presumably package.json) but are absent from package-lock.json. Since markdown-it-texmath is not a transitive dependency of any other installed package, npm users will encounter a Cannot find module error when opening math-containing documents.

Confidence Score: 2/5

• Not safe to merge until the package-lock.json sync issue is resolved — math rendering will silently fail for npm users.
• The core rendering logic is well-structured and most previous review concerns have been addressed. However, the package-lock.json / bun.lock desync for markdown-it-texmath is a build-breaking regression for npm users, and the isDarkColor non-hex handling will silently corrupt mermaid theme colors on many real-world light themes. These two issues lower the confidence score significantly.
• package-lock.json (missing direct deps) and src/pages/markdownPreview/index.js (isDarkColor non-hex fallback).

Important Files Changed

Sequence Diagram

sequenceDiagram
    participant U as User (opens .md)
    participant R as run.js
    participant P as openMarkdownPreview
    participant C as createMarkdownPreview
    participant RD as renderer.js
    participant M as mermaid (lazy)
    participant K as katex/texmath (lazy)

    U->>R: run() called
    R->>R: check .md extension
    R->>P: openMarkdownPreview(file)
    P->>C: createMarkdownPreview(file) (first time)
    C->>C: bind(file)
    C->>RD: renderMarkdown(text, file)
    RD->>RD: hasMathContent(text)?
    alt has math
        RD->>K: import("katex") + import("markdown-it-texmath")
        K-->>RD: modules resolved
        RD->>RD: createMarkdownIt({ katex, texmath })
    else no math
        RD->>RD: use baseMarkdownIt
    end
    RD-->>C: { html }
    C->>C: DOMPurify.sanitize(html)
    C->>C: resolveRenderedImages()
    C->>C: enhanceCodeBlocks() → DOMPurify(highlighted)
    C->>C: renderMermaidBlocks()
    C->>M: import("mermaid") (lazy)
    M-->>C: mermaid module
    C->>M: mermaid.render(id, source)
    M-->>C: { svg, bindFunctions }
    C->>C: DOMPurify.sanitize(svg, SVG profile)
    C->>C: block.innerHTML = sanitizedSvg
    C->>C: bindFunctions?.(block)

_{Last reviewed commit: "fix"}

@greptileai